<template>
    <el-dialog
      @close="close"
      :title="!id? '添加banner图信息': '编辑banner图信息'"
      :visible.sync="dialog"
      width="30%"
    >
        <el-form size="mini" :model="formInline" :rules="rules" ref="formInline" label-width="100px">
            <el-form-item label="banner图名称：" prop="title" >
                <el-input v-model="formInline.title"></el-input>
            </el-form-item>
            <el-form-item label="端类型：" prop="plattype" >
                <el-select v-model="formInline.plattype" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="上传banner图：" prop="photo">
                <input accept="image/gif, image/jpeg, image/png" class="upload-file_ipt" @change="tirggerFile($event)" type="file" >
                <br>
                <img  width="68" height="68" :src="showImg" alt="">
            </el-form-item>
            <el-form-item  label="关联" prop="link">
                <el-radio v-model="formInline.linktype" :label = 1>用户房间号</el-radio>
                <el-radio v-model="formInline.linktype" :label = 0>H5链接</el-radio>
                <el-input placeholder="输入需要关联的房间号" v-model="formInline.link"></el-input>
            </el-form-item>
            <el-form-item  label="是否上架">
                <el-radio v-model="formInline.statustype" :label=0>是</el-radio>
                <el-radio v-model="formInline.statustype" :label=1>否</el-radio>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button :disabled="btnLoading" @click="dialog = false">取 消</el-button>
            <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import { addBannerListAPI , getBannerDetailAPI , updateBannerAPI} from '@/api/entertainmenthall';
import { upload, formatFile } from '@/utils/other-request';
import { mapGetters } from 'vuex';
// import { getRouterTreeAPI } from '@/api/system/menu'
export default {
    name: 'BannerListEdit',
    props: {
        dialog_: {
            type: Boolean,
            default: false
        },
        id: {
            type: Number,
            default: null
        }
    },
    computed: {
        ...mapGetters([
            'img_base_url',
        ])
    },
    data() {
        var validateLink = (rule, value, callback) => {
            var reg = /^[0-9]\d*$/;
            if (value === null || value === '' | value === undefined) {
                callback();
            } else if (!reg.test(value)) {
                return callback(new Error('请输入正确的数字'))
            } else {
                callback();
            }
        }
        const validatePlattype = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请选择端类型"));
            }
            callback();
        }
        const validatePhoto = (rule, value, callback) => {
            if (this.formInline.photo !== "") {
                callback();
            } else {
                callback(new Error("请选择图片"));
            }
        }
        return {
            props: {
                label: 'title',
                children: 'children'
            },
            showImg:null,
            fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
            options: [{
                value: 0,
                label: '全部'
            }, {
                value: 1,
                label: 'PC'
            }, {
                value: 2,
                label: 'android'
            }, {
                value: 3,
                label: 'ios'
            }, {
                value: 4,
                label: 'web'
            }],
            value: '',
            dialog: false,
            formInline: {
                id: 0,
                title: '',
                photo:'',
                status: 1,
                remark: '',
                linktype:0,
                link:'',
                statustype:1,
                plattype:''
            },
            btnLoading: false,
            treeData: [],
            rules: {
                title: [
                    { required: true, message: '请填写banner图名称', trigger: 'blur' }
                ],
                plattype: [
                    { validator: validatePlattype, trigger: 'change' }
                ],
                photo: [
                    { validator: validatePhoto, trigger: 'change'}
                ],
                link: [
                    { required: true, message: '请填写关联信息', trigger: 'blur' }
                ]
            }
        }   
    },
    methods: {
        // 选择头像回调
        tirggerFile(event) {
            var e = event || window.event;
            if (e.target.files.length > 0) {
                this.formInline.photo = e.target.files[0];
                this.showImg = URL.createObjectURL(this.formInline.photo);
            }
        },
        // 根据角色ID查询角色详情
        getBannerDetails() {
            getBannerDetailAPI({ id: this.id }).then(res => {
                if (res.code === 0) {
                    this.formInline = res.data;
                    this.showImg = this.img_base_url + this.formInline.photo;
                } else {
                    this.$message.error("获取详情失败");
                }
            })
        },
        close() {
            this.$emit('close');
        },
        // 提交
        onSubmit() {
            this.$refs.formInline.validate((valid) => {
                if (valid) {
                    if(this.id){
                        this.btnLoading = true;
                        if (Object.prototype.toString.call(this.formInline.photo).slice(8, -1) === "String") { // 替换图片则不上传图片
                            updateBannerAPI(this.formInline).then(res => {
                                this.btnLoading = false;
                                if (res.code === 0) {
                                    this.$message.success('操作成功');
                                    this.$emit('success');
                                    this.dialog = false;
                                } else {
                                    this.$message.error(res.message);
                                }
                            })
                        } else {
                            upload(formatFile(this.formInline.photo)).then(res => {
                            this.formInline.photo = res.data.path;
                            updateBannerAPI(this.formInline).then(res => {
                                this.btnLoading = false;
                                if (res.code === 0) {
                                    this.$message.success('操作成功');
                                    this.$emit('success');
                                    this.dialog = false;
                                } else {
                                    this.$message.error(res.message);
                                }
                            })
                        })
                        }
                    }else{
                        this.btnLoading = true;
                        upload(formatFile(this.formInline.photo)).then(res => {
                            this.formInline.photo = res.data.path;
                            addBannerListAPI(this.formInline).then(res => {
                                this.btnLoading = false;
                                if (res.code === 0) {
                                    this.$message.success('操作成功');
                                    this.$emit('success');
                                    this.dialog = false;
                                } else {
                                    this.$message.error(res.message);
                                }
                            })
                        })
                    }
                } else {
                    this.$message.warning("请填写完整的信息")
                    return false;
                }
            });
        },
    },
    mounted() {
        this.dialog = this.dialog_;
        if (this.id) {
            this.getBannerDetails() // 编辑查询详情
        }
    }
}
</script>
